<template>
  <fieldset>
    <legend>App</legend>
    <div class="container">
      <headerCom></headerCom>
      <formField></formField>
      <todos></todos>
      <options></options>
    </div>
    
  </fieldset>
</template>
<script setup>
  import headerCom from "./components/Header.vue"
  import formField from "./components/FormField.vue"
  import todos from "./components/Todos.vue"
  import options from "./components/Options.vue"
</script>
<style scoped>
  fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
  }
    .container {
    background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;
  }
</style>
